<template>
	<div class="classificationBox">
		<div class="classificationTop">
			<span class="classificationTitle">软件精选</span>
			<span class="classificationTabs">
				<span v-for="item in choiceChannelList" class="classificationTabsName" @mouseenter="tabsClick(item.channelPath)" :class="item.channelPath == activeIndex ? 'tabsActive' : ''">
					{{ item.channelName }}
				</span>
			</span>
		</div>
		<div class="classificationBtm">
			<a class="block_a software" :href="Path + item?.url" v-for="item in contentList">
				<img :src="getImgPath(item.headImag)" alt="" class="softwareLeft" />
				<div class="softwareRight">
					<p class="p1">{{ item?.title }}</p>
					<p class="p2">{{ item.shortTitle }}</p>
					<p class="p3">{{ item.extend.enclosureUpload?.length ? item.extend.enclosureUpload[0].resourceSize : '未知' }}</p>
					<span class="p4" @click.stop.prevent='downLoadFile(item)'>立即下载</span>
				</div>
			</a>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		choiceChannelList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			activeIndex: 0,
			contentList: [],
			Path: getRootPath(),
			query: GetQueryString()
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.activeIndex = this.choiceChannelList[0].channelPath;
			this.getContentOfChannel();
		});
	},
	methods: {
		tabsClick(val) {
			console.log(val, 21321);
			this.activeIndex = val;
			this.$nextTick(() => {
				this.getContentOfChannel();
			});
		},
		getContentOfChannel() {
			let param = {
				channelPaths: this.activeIndex,
				orderBy: 2,
				pageNum: 1,
				pageSize: 20,
				isTop: false,
				excludeTypeIdStr: '1401'
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = [];
					this.contentList = res.data.records;
				} else {
				}
			});
		},
		getImgPath(url) {
			return imgPath(url);
		},
		downLoadFile(item) {
			let param = {
				contentId: item.id,
				resIds: item.extend.enclosureUpload[0]?.id
			};
			contentApi.downloadAnnexs(param, res => {
				downloadFile(res.data, item.title + '.zip');
				
			});
		},
	}
};
</script>

<style scoped="scoped">
.classificationBox {
	margin-top: 60px;
	width: 1200px;
}
.classificationBtm {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
}

.classificationBtm .software {
	margin-left: 12px;
	box-sizing: border-box;
	width: 291px;
	height: 96px;
	padding: 12px 20px;
	background: #ffffff;
	display: flex;
	cursor: pointer;
}
.classificationBtm .software:hover{
	background: #f8f8f8;
}
.softwareLeft {
	width: 72px;
	height: 72px;
}

.softwareRight {
	margin-left: 12px;
	position: relative;
	flex: 1;
}


.software:hover .p3 {
	display: none;
	color:#666;
}

.software:hover .p4 {
	display: block;
}
.softwareRight .p4 {
	display: none;
	cursor: pointer;
	position: absolute;
	margin-top: 12px;
	padding: 6px 8px;
	height: 12px;
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
	line-height: 12px;
	background: #3ace72;
	border-radius: 4px;
}
.softwareRight .p4:hover {
	background: #60db8b;
}
.softwareRight .p4:active {
	background: #27a85d;
}
.softwareRight .p2,
.softwareRight .p3 {
	margin-top: 12px;
	height: 12px;
	font-size: 12px;
	line-height: 12px;
	font-weight: 400;
	color: #666;
}
.classificationBtm .software .p1 {
	cursor: pointer;
	margin-top: 5px;
	height: 14px;
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	color: #333333;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	white-space: pre-wrap;
}
.classificationBtm .software .p1:hover {
	color: #ff3333;
}
.software:nth-child(4n + 1) {
	margin-left: 0;
}
.classificationTop {
	display: flex;
}

.classificationTitle {
	height: 30px;
	font-size: 30px;
	font-weight: 600;
	color: #333333;
	line-height: 30px;
}

.classificationTabs {
	margin-left: 48px;
	display: flex;
	align-items: flex-end;
}
.classificationTabs .classificationTabsName {
	box-sizing: border-box;
	padding-bottom: 8px;
	margin-right: 32px;
	height: 22px;
	font-size: 14px;
	font-weight: 400;
	color: #666666;
	line-height: 14px;
	cursor: pointer;
}

.classificationTabs .tabsActive {
	color: #333333;
	font-weight: 500;
	border-bottom: 2px solid #ff3333;
}
</style>
